---
image: /generated/articles-docs-timeline-render.png
title: Timeline – Rendering videos
sidebar_label: Render
id: render
---

The [`<Timeline />`](/docs/timeline) component is in a sample Vite project, which is a frontend-only application.

If you want to render the state of your timeline into a video, you need to set up server-side rendering.

## Recommendation: Use a backend framework

We recommend that you use one of our Saas templates to setup a Remotion project that has both a frontend and backend.

It is easier if you use [Next.js](/templates/next) or [React Router](/templates/react-router) templates and copy the timeline component into your project frontend.

These templates include useful boilerplate code for rendering on AWS Lambda.

## Create Remotion project files

Follow [these instructions](/docs/player-into-remotion-project) for how to turn your `<Player>`-based frontend into a Remotion project.  
If you are using a SaaS template, you might already have these files, in which case you can replace them.

## Using the Timeline state

In [`src/timeline/video-preview.tsx`](https://github.com/remotion-dev/timeline/blob/main/src/timeline/video-preview.tsx), you can see that the timeline state is being passed to the [`<Player>`](/docs/player) component.

Whenever you are rendering a video using the [server-side rendering](/docs/ssr) APIs like[ `renderMediaOnLambda`](/docs/lambda/rendermediaonlambda) or [`renderMedia()`](/docs/renderer/render-media), make sure you specify the `inputProps` option and pass in the same payload that you passed to the `<Player>` component.

Note that this payload must be JSON-serializable, so you cannot pass in functions or other non-serializable values.
